
<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <avue-crud
        ref="crud"
        :option="tableOption"
        :data="list"
        :page="page"
        v-model="form"
        :table-loading="listLoading"
        :permission="permissionList"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-update="update"
        @row-save="create"
        @row-del="rowDel">

      </avue-crud>
    </basic-container>

  </div>
</template>

<script>
  import { addObj, delObj, fetchList, putObj } from '@/api/admin/datarule'
  import { tableOption } from '@/const/crud/admin/datarule'
  import { mapGetters } from 'vuex'

  export default {
    name: 'TableRole',
    data() {
      return {
        searchForm: {},
        tableOption: tableOption,
        treeData: [],
        checkedKeys: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        menuId: undefined,
        list: [],
        listLoading: true,
        form: {}
      }
    },

    computed: {
      ...mapGetters(['elements', 'permissions']),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permissions['sys_datarule_add'], false),
          delBtn: this.vaildData(this.permissions['sys_datarule_del'], false),
          editBtn: this.vaildData(this.permissions['sys_datarule_edit'], false)
        };
      },
    },

    methods: {

      init(menuId) {
        if (menuId != null) {
          this.menuId = menuId;
          this.searchForm.menuId = this.menuId
          this.getList(this.page, this.searchForm)
        }

      },

      getList(page, params) {
        this.listLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.list = response.data.data.records
          this.page.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
      },
      handleRefreshChange() {
        this.getList(this.page)
      },
      handleFilter(form) {
        this.searchForm = form
        this.getList(this.page, form)
      },

      create(row, done, loading) {
        this.form.menuId = this.menuId;
        addObj(this.form).then(() => {
          this.getList(this.page)
          done()
          this.$notify.success('创建成功')
        }).catch(() => {
          loading()
        })
      },
      update(row, index, done, loading) {
        putObj(this.form).then(() => {
          this.getList(this.page)
          done()
          this.$notify.success('修改成功')
        }).catch(() => {
          loading()
        })
      },
      rowDel(row) {
        this.$confirm('是否确认删除名称为"' + row.name + '"' + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delObj(row.id)
        }).then(() => {
          this.getList(this.page)
          this.$notify.success('删除成功')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper {
    .el-dialog {
      width: 61% !important;
      .dialog-main-tree {
        max-height: 400px;
        overflow-y: auto;
      }
    }
    .el-form-item__label {
      width: 20% !important;
      padding-right: 20px;
    }
    .el-form-item__content {
      margin-left: 20% !important;
    }
  }
</style>
